import React from 'react';
import { Route } from 'react-router-dom';

// 1.封装KeepAlive组件
//   2. 把KeepAlive挪到Switch组件外即可
//   原理：
//   路由原理：组件和路径的映射关系
//   Switch匹配的原理：
//     1.匹配到路径和组件，就渲染组件
//     2.没有匹配到就返回null，表示卸载组件

//     KeepAlive的原理是：
//       1.匹配到路径和组件，就渲染组件
//       2.没有匹配到就 通过样式隐藏，而不卸载组件
type KeepAlivePropsType = {
  path: string;
  component: React.FC<any>;
  [key: string]: any;
};

export default function KeepAlive({
  path,
  component: Com,
  ...restProps
}: KeepAlivePropsType) {
  return (
    <div>
      <Route path={path} {...restProps}>
        {(porps) => {
          // console.log(porps);
          const locaName = porps.location.pathname;
          // console.log(locaName);
          // 修复在其他页面也会显示Layout组件的bug
          // 添加白名单
          // const whiteList = ['/home', '/qa', '/video', '/profile'];
          // console.log(whiteList.includes(locaName));

          // 重新定义白名单(修复匹配不到页面时,404页不显示的问题)
          const whiteList = [
            '/search',
            '/article',
            '/profile/',
            '/login',
            '/test',
          ];
          const show = whiteList.filter((item) => locaName.startsWith(item));
          // console.log(show);

          return (
            <div
              style={{
                display:
                  // 修复在其他页面也会显示Layout组件的bug
                  // locaName.startsWith(path) && whiteList.includes(locaName)

                  //重新定义白名单(修复匹配不到页面时,404页不显示的问题)
                  locaName.startsWith(path) && show.length <= 0
                    ? 'block'
                    : 'none',
              }}
            >
              <Com />
            </div>
          );
        }}
      </Route>
    </div>
  );
}
